<template>
    <el-row justify="center" :gutter="5" style="height:23vh;">
        <el-col :span="10" style="height:100%;">
            <dv-border-box12 style="width:100%;height:100%;">
                <div id="pie1" style="width:100%;height:100%;"></div>
            </dv-border-box12>
        </el-col>
        <el-col :span="10" style="height:100%;">
            <dv-border-box12 style="width:100%;height:100%;">
                <div id="pie2" style="width:100%;height:100%;"></div>
            </dv-border-box12>
        </el-col>
    </el-row>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, watch, inject, onUnmounted } from 'vue'
const wsState = inject('wsState');

function renderPie1() {
    var chartDom = document.getElementById('pie1');
    if (!chartDom) return;
    let myChart = echarts.getInstanceByDom(chartDom);
    if (!myChart) {
        myChart = echarts.init(chartDom);
    }
    var option = {
        title: {
            text: '宿舍床位占比图',
            left: 'center',
            textStyle: { color: '#fff', fontSize: 16 },
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: { color: '#fff', fontSize: 16 },
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    { value: wsState.pie.bed[0], name: '使用床位数' },
                    { value: wsState.pie.bed[1], name: '剩余床位数' },
                ],
                label: { show: false, position: 'center' },
                textStyle: { color: '#fff', fontSize: 16 },
            }
        ]
    };
    myChart.setOption(option, true);
}
function renderPie2() {
    var chartDom = document.getElementById('pie2');
    if (!chartDom) return;
    let myChart = echarts.getInstanceByDom(chartDom);
    if (!myChart) {
        myChart = echarts.init(chartDom);
    }
    var option = {
        title: {
            text: '出入统计图',
            left: 'center',
            textStyle: { color: '#fff', fontSize: 16 },
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: { color: '#fff', fontSize: 10 },
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    { value: wsState.pie.inout[0], name: '出舍人数' },
                    { value: wsState.pie.inout[1], name: '入舍人数' },
                    { value: wsState.pie.inout[2], name: '长期未出人数' },
                    { value: wsState.pie.inout[3], name: '长期未归人数' },
                ],
                label: { show: false, position: 'center' },
                textStyle: { color: '#fff', fontSize: 10 },
            }
        ]
    };
    myChart.setOption(option, true);
}

onMounted(() => {
    renderPie1();
    renderPie2();
})
watch(() => wsState.pie, () => {
    renderPie1();
    renderPie2();
}, { deep: true });
onUnmounted(() => {
    const chart1 = echarts.getInstanceByDom(document.getElementById('pie1'));
    chart1 && chart1.dispose();
    const chart2 = echarts.getInstanceByDom(document.getElementById('pie2'));
    chart2 && chart2.dispose();
});
</script>
<style lang="scss">
#pie1,
#pie2 {
    width: 100%;
    height: 22vh;
    padding: 1vw;
}
</style>